<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
    }

    .dashboard {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .section {
      background-color: #ffffff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .section-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
    }

    .data-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .data-item {
      background-color: #4a90e2;
      color: white;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
    }

    .chart-placeholder {
      background-color: #e6e6e6;
      /* height: 50px; */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
    }

    .status-item {
      padding: 10px;
      text-align: center;
      border-radius: 5px;
    }

    .status-1 {
      background-color: #808080;
      color: white;
    }

    .status-2 {
      background-color: #ffd700;
    }

    .status-3,
    .status-4,
    .status-5 {
      background-color: #e6e6e6;
    }

    .monitoring-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .monitoring-item {
      background-color: #4a90e2;
      color: white;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="dashboard">
    <div class="section">
      <div class="section-title">警觉性生理行为特征采集模块</div>
      <div class="data-grid">
        <div class="data-item">实时监测</div>
        <div class="data-item">导入数据</div>
        <div class="data-item">面部表情</div>
        <div class="data-item">眼动信号</div>
        <div class="data-item">心率信号</div>
      </div>
      <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 20px;">
        <div class="chart-placeholder">人脸窗口</div>
        <div style="display: grid; gap: 10px;">
          <div class="chart-placeholder" style="height: 100px;">心率波形显示窗口</div>
          <div class="data-item">眨眼：x次/分钟 x毫米/分钟</div>
          <div class="data-item">眼闭合时间比例：%</div>
          <div class="data-item">哈欠：x次/分钟</div>
          <div class="data-item">点头：x次/分钟</div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="section-title">警觉性敏感指标提取融合模块</div>
      <div class="data-grid">
        <div class="data-item">全选</div>
        <div class="data-item">全选</div>
        <div class="data-item">全选</div>
        <div class="data-item">哈欠检测</div>
        <div class="data-item">Perclos</div>
        <div class="data-item">心率</div>
        <div class="data-item">头动检测</div>
        <div class="data-item">眨眼频率</div>
        <div class="data-item">心率变异性</div>
        <div class="data-item">......</div>
        <div class="data-item">眨眼时间</div>
        <div class="data-item">......</div>
        <div class="data-item">注视时间</div>
        <div class="data-item">......</div>
      </div>
      <div style="margin-top: 20px;">
        <div class="data-grid">
          <div class="data-item">原值</div>
          <div class="data-item">归一化</div>
          <div class="data-item">赋权</div>
          <div class="data-item">不赋权</div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="section-title">警觉性分级提示模块</div>
      <div class="status-grid">
        <div class="status-item status-1">1</div>
        <div class="status-item status-2">2</div>
        <div class="status-item status-3">3</div>
        <div class="status-item status-4">4</div>
        <div class="status-item status-5">5</div>
      </div>
      <div style="margin-top: 20px;">
        <div class="monitoring-grid">
          <div class="monitoring-item">
            <div>走神监测</div>
            <div>走神x次/分钟</div>
            <div>最长走神时间：xx分钟</div>
          </div>
          <div class="monitoring-item">
            <div>脱岗监测</div>
            <div>脱岗x次/分钟</div>
            <div>最长脱岗时间：xx分钟</div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px;">
        <div class="data-grid">
          <div class="data-item">眼动：</div>
          <div class="data-item">面部表情：</div>
          <div class="data-item">心电：</div>
        </div>
        <div class="data-item" style="margin-top: 10px;">综合：</div>
      </div>
    </div>
    <div class="section">
      <div class="section-title">警觉性监测控制模块</div>
      <div class="data-grid">
        <div class="data-item">分级监测</div>
        <div class="data-item">分数预测</div>
      </div>
      <div class="data-grid" style="margin-top: 20px;">
        <div class="data-item">警觉性监测</div>
        <div class="data-item">走神监测</div>
        <div class="data-item">脱岗监测</div>
      </div>
      <div class="data-grid" style="margin-top: 20px;">
        <div class="data-item">开始监测</div>
        <div class="data-item">暂停监测</div>
        <div class="data-item">结束监测</div>
      </div>
    </div>
  </div>
</body>

</html>